<script setup lang="ts">
import {
  Server as ProviderIcon,
  CalendarDays as ExpireIcon,
} from "lucide-vue-next";

const { data: vpsList } = await useAsyncData(() =>
  $get<VpsWithProvider[]>("/vps")
);
</script>

<template>
  <PageTitle>VPS续期</PageTitle>
  <ul class="grid grid-cols-5 gap-2">
    <li
      :class="`border p-3 rounded flex flex-col gap-y-2 ${
        $dayjs(vps.expire).subtract(2, 'days').isBefore($dayjs())
          ? 'border-orange-600'
          : ''
      }`"
      v-if="vpsList"
      v-for="vps in vpsList"
      :key="vps.id"
    >
      <h3 class="text-lg">{{ vps.name }}</h3>
      <div class="flex justify-start items-center gap-x-1">
        <div class="text-gray-600"><ProviderIcon :size="16" /></div>
        <div>{{ vps.provider_name }}</div>
      </div>
      <div class="flex justify-start items-center gap-x-1">
        <div class="text-gray-600"><ExpireIcon :size="16" /></div>
        <div>{{ $dayjs(vps.expire).format("YYYY/MM/DD") }}</div>
      </div>
      <div><Button color="info">续期</Button></div>
    </li>
  </ul>
</template>
